{% extends "admin/base.html" %}

{% block content %}
<div class="content-header">
    <h1>仪表盘</h1>
</div>

<div class="row">
    <!-- 系统资源监控卡片 -->
    <div class="col-md-3 col-sm-6 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <h5 class="card-title">CPU</h5>
                <div class="radial-progress-container">
                    <div class="radial-progress" data-percentage="{{ system_info.cpu_percent }}">
                        <svg class="radial-progress-svg" viewBox="0 0 100 100">
                            <circle class="radial-progress-track" cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="8"></circle>
                            <circle class="radial-progress-fill" cx="50" cy="50" r="45" fill="none" stroke="#ff6b6b" stroke-width="8" stroke-linecap="round" transform="rotate(0 50 50)" stroke-dasharray="{{ system_info.cpu_percent * 2.83 }} 283"></circle>
                            <text x="50" y="50" text-anchor="middle" dy="7" font-size="20" fill="#333" transform="rotate(90 50 50)">{{ "%.1f"|format(system_info.cpu_percent) }}%</text>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 col-sm-6 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <h5 class="card-title">内存</h5>
                <div class="radial-progress-container">
                    <div class="radial-progress" data-percentage="{{ system_info.memory_percent }}">
                        <svg class="radial-progress-svg" viewBox="0 0 100 100">
                            <circle class="radial-progress-track" cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="8"></circle>
                            <circle class="radial-progress-fill" cx="50" cy="50" r="45" fill="none" stroke="#4cc9f0" stroke-width="8" stroke-linecap="round" transform="rotate(0 50 50)" stroke-dasharray="{{ system_info.memory_percent * 2.83 }} 283"></circle>
                            <text x="50" y="50" text-anchor="middle" dy="7" font-size="20" fill="#333" transform="rotate(90 50 50)">{{ "%.1f"|format(system_info.memory_percent) }}%</text>
                        </svg>
                    </div>
                    <div class="mt-2">
                        <small class="text-muted">{{ system_info.memory_used }}GB / {{ system_info.memory_total }}GB</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 col-sm-6 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <h5 class="card-title">硬盘</h5>
                <div class="radial-progress-container">
                    <div class="radial-progress" data-percentage="{{ system_info.disk_percent }}">
                        <svg class="radial-progress-svg" viewBox="0 0 100 100">
                            <circle class="radial-progress-track" cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="8"></circle>
                            <circle class="radial-progress-fill" cx="50" cy="50" r="45" fill="none" stroke="#7ae582" stroke-width="8" stroke-linecap="round" transform="rotate(0 50 50)" stroke-dasharray="{{ system_info.disk_percent * 2.83 }} 283"></circle>
                            <text x="50" y="50" text-anchor="middle" dy="7" font-size="20" fill="#333" transform="rotate(90 50 50)">{{ system_info.disk_percent }}%</text>
                        </svg>
                    </div>
                    <div class="mt-2">
                        <small class="text-muted">{{ system_info.disk_used }}GB / {{ system_info.disk_total }}GB</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 col-sm-6 mb-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <h5 class="card-title">GPU</h5>
                <div class="radial-progress-container">
                    {% if system_info.gpu_info %}
                        {% for gpu in system_info.gpu_info %}
                        <div class="radial-progress" data-percentage="{{ gpu.memory_used / gpu.memory_total * 100 }}">
                            <svg class="radial-progress-svg" viewBox="0 0 100 100">
                                <circle class="radial-progress-track" cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="8"></circle>
                                <circle class="radial-progress-fill" cx="50" cy="50" r="45" fill="none" stroke="#8e44ad" stroke-width="8" stroke-linecap="round" transform="rotate(0 50 50)" stroke-dasharray="{{ (gpu.memory_used / gpu.memory_total * 283)|round(2) }} 283"></circle>
                                <!-- 显存使用率百分比显示在圆盘中间 -->
                                <text x="50" y="50" text-anchor="middle" dy="7" font-size="20" fill="#333" transform="rotate(90 50 50)">
                                    {{ "%.1f"|format(gpu.memory_used / gpu.memory_total * 100) }}%
                                </text>
                            </svg>
                        </div>
                        <div class="mt-2">
                            <small class="text-muted">
                                {{ gpu.memory_used }}GB / {{ gpu.memory_total }}GB 
                            </small>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="no-hardware">
                            <svg class="no-hardware-icon" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#ccc" stroke-width="2">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="15" y1="9" x2="9" y2="15"></line>
                                <line x1="9" y1="9" x2="15" y2="15"></line>
                            </svg>
                            <p class="no-hardware-text">无</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">快速跳转</h5>
                <button id="edit-links-btn" type="button" class="btn btn-sm btn-light border">编辑</button>
            </div>
            <div class="card-body">
                <div class="quick-links" id="quick-links">
                    <!-- 链接按钮由JS动态生成 -->
                </div>
                <form id="add-link-form" class="form-inline mt-3" onsubmit="return false;" style="display:none;">
                    <input type="text" id="link-name" class="form-control mr-2 mb-2" placeholder="链接名称" required style="width:120px;">
                    <input type="url" id="link-url" class="form-control mr-2 mb-2" placeholder="链接URL" required style="width:220px;">
                    <button type="submit" class="btn btn-light border mb-2">添加链接</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
    .radial-progress-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .radial-progress {
        width: 120px;
        height: 120px;
    }
    
    .radial-progress-svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }
    
    .radial-progress-track {
        stroke: #e0e0e0;
    }
    
    .radial-progress-fill {
        transition: stroke-dasharray 0.5s ease;
    }
    
    .no-hardware {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 0;
    }
    
    .no-hardware-icon {
        margin-bottom: 10px;
    }
    
    .no-hardware-text {
        margin: 0;
        color: #6c757d;
        font-size: 1rem;
    }
    
    .quick-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }
    .quick-link-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
    }
    .quick-link-remove {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #dc3545;
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 14px;
        line-height: 18px;
        cursor: pointer;
        padding: 0;
        z-index: 2;
        display: none;
    }
    .quick-link-btn.editing .quick-link-remove {
        display: block;
    }
    #add-link-form.editing {
        display: flex !important;
    }
    /* 让按钮风格更柔和 */
    .btn-light {
        background-color: #f8f9fa !important;
        color: #333 !important;
        border-color: #dee2e6 !important;
    }
    .btn-light:hover, .btn-light:focus {
        background-color: #e2e6ea !important;
        color: #222 !important;
    }
</style>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const statusText = document.getElementById('model-status-text');
        const refreshStatusIcon = document.getElementById('refresh-model-status');
        const modelNameSpan = document.getElementById('current-model-name');
        const refreshModelIcon = document.getElementById('refresh-model-name');

        function checkModelStatus() {
            statusText.textContent = '加载中...';
            statusText.className = 'text-warning';

            fetch('/model_status')
                .then(response => {
                    if (response.ok) {
                        return response.text();
                    } else {
                        throw new Error('服务未响应');
                    }
                })
                .then(data => {
                    statusText.textContent = '模型服务已启动';
                    statusText.className = 'text-success';
                })
                .catch(error => {
                    statusText.textContent = '模型服务未启动';
                    statusText.className = 'text-danger';
                });
        }

        function fetchModelName() {
            modelNameSpan.textContent = '加载中...';
            modelNameSpan.className = 'text-warning';

            fetch('/current_model')
                .then(response => response.json())
                .then(data => {
                    if (data.model_name) {
                        modelNameSpan.textContent = data.model_name;
                        modelNameSpan.className = 'text-success';
                    } else {
                        throw new Error(data.error || '未知错误');
                    }
                })
                .catch(error => {
                    modelNameSpan.textContent = '无';
                    modelNameSpan.className = 'text-danger';
                    console.error('模型名称获取失败:', error);
                });
        }

        if (refreshStatusIcon) {
            refreshStatusIcon.addEventListener('click', checkModelStatus);
        }

        if (refreshModelIcon) {
            refreshModelIcon.addEventListener('click', fetchModelName);
        }

        // 页面加载时自动获取状态和模型名称
        // 修改初始状态以与其他页面保持一致
        statusText.textContent = '模型服务未启动';
        statusText.className = 'text-danger';
        modelNameSpan.textContent = '无';
        modelNameSpan.className = 'text-danger';
        
        checkModelStatus();
        fetchModelName();
    });
</script>
<script>
    // 默认链接
    const defaultLinks = [
        { name: "百度", url: "https://www.baidu.com" },
        { name: "GitHub", url: "https://www.github.com" },
        { name: "必应", url: "https://www.bing.com" }
    ];

    function getLinks() {
        const saved = localStorage.getItem('quickLinks');
        if (saved) {
            try {
                return JSON.parse(saved);
            } catch {
                return [...defaultLinks];
            }
        }
        return [...defaultLinks];
    }

    function saveLinks(links) {
        localStorage.setItem('quickLinks', JSON.stringify(links));
    }

    let editing = false;

    function renderLinks() {
        const links = getLinks();
        const container = document.getElementById('quick-links');
        container.innerHTML = '';
        links.forEach((link, idx) => {
            const btn = document.createElement('div');
            btn.className = 'quick-link-btn' + (editing ? ' editing' : '');
            btn.innerHTML = `
                <a href="${link.url}" target="_blank" class="btn btn-light border m-2">${link.name}</a>
                <button class="quick-link-remove" title="删除" onclick="window.removeLink(${idx})">&times;</button>
            `;
            container.appendChild(btn);
        });
    }

    function removeLink(idx) {
        const links = getLinks();
        links.splice(idx, 1);
        saveLinks(links);
        renderLinks();
    }
    window.removeLink = removeLink;

    function setEditingMode(on) {
        editing = on;
        // 按钮文本切换
        const editBtn = document.getElementById('edit-links-btn');
        if (editBtn) {
            editBtn.textContent = editing ? '完成' : '编辑';
        }
        // 显示/隐藏添加表单
        const addForm = document.getElementById('add-link-form');
        if (addForm) {
            if (editing) {
                addForm.classList.add('editing');
            } else {
                addForm.classList.remove('editing');
            }
        }
        renderLinks();
    }

    document.addEventListener('DOMContentLoaded', function() {
        renderLinks();
        document.getElementById('add-link-form').addEventListener('submit', function() {
            const name = document.getElementById('link-name').value.trim();
            const url = document.getElementById('link-url').value.trim();
            if (!name || !url) return;
            const links = getLinks();
            links.push({ name, url });
            saveLinks(links);
            renderLinks();
            this.reset();
        });
        document.getElementById('edit-links-btn').onclick = function() {
            setEditingMode(!editing);
        };
        setEditingMode(false);
    });
</script>
{% endblock %}